<template>
    <div id="cesiumContainer"></div>
  </template>
  
  <script setup>
  import { onMounted } from 'vue'
  //这个是引入全部相关的依赖
  import * as Cesium from 'cesium'
  
  // 设置 Cesium官网访问令牌 token
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MjNlMzU4Yy02ZjIxLTQ5NTYtYjY2Zi1jZDJiNjk5YTMzZDIiLCJpZCI6MjUwNjgwLCJpYXQiOjE3Mjk4NDQzNTZ9.e93DmnMdN5_Rds_i5ZHbhep4ghWmDZExtrQLcEvK2L0'
  
  onMounted(async () => {
    // 初始化 Cesium Viewer，就是地图图层的效果样式，替换下面的3D逼真
    /*  const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain({
        //地形照明数据
        requestVertexNormals: true,
        //水效果
        requestWaterMask: true,
      }),
      
    })   */
   

        //3D逼真图块，关闭地图其他效果
     const viewer = new Cesium.Viewer("cesiumContainer", {
    globe: false,
}); 
// 房子颜色高亮，房屋种类分类，并且点击显示信息
viewer.scene.skyAtmosphere.show = true;
const currentTime = Cesium.JulianDate.fromIso8601(
"2020-01-09T23:00:39.018261982600961346Z"
);
viewer.clock.currentTime = currentTime;

        ///全局的逼真 3D Tiles 层，上了这个就会很卡，比较吃显卡
        try {
        const tileset = await Cesium.createGooglePhotorealistic3DTileset();
        viewer.scene.primitives.add(tileset);
        } catch (error) {
        console.log(`Failed to load tileset: ${error}`);
        }

        //区域高亮 加载geojson数据
let footprint;
try {
          const resource = await Cesium.IonResource.fromAssetId(2533131);
          const dataSource = await Cesium.GeoJsonDataSource.load(resource, {
            clampToGround: true,
});

     viewer.dataSources.add(dataSource);

     footprint = dataSource.entities.values.find((entity) =>
     		Cesium.defined(entity.polygon)
     );
     footprint.polygon.outline = false;

      // 缩放到数据位置，设置主视图
      const cameraOffset = new Cesium.HeadingPitchRange(
     		Cesium.Math.toRadians(95.0),
     		Cesium.Math.toRadians(-18.0),
           600.0
      );
      viewer.zoomTo(footprint, cameraOffset);          
      viewer.homeButton.viewModel.command.beforeExecute.addEventListener(
            (e) => {
              e.cancel = true;
              viewer.zoomTo(footprint, cameraOffset);
            }
);
} catch (error) {
console.log(`Error loading geojson. ${error}`);
} 


    // 相机飞往指定位置 -122.4175, 37.655, 400（旧金山）   118.052678, 24.62063, 400（公司经纬）  后面那个数值是高度      
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-15.0),
      },
    })

  //东京晴空塔飞往西雅图太空针塔
    /* 
    
    viewer.camera.flyTo({
  destination: new Cesium.Cartesian3(
    -3961951.575572026,
    3346492.0945766014,
    3702340.5336036095
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      0.8982074415844437,
      -0.4393530288745287,
      0.013867512433959908
    ),
    up: new Cesium.Cartesian3(
      0.12793638617798253,
      0.29147314437764565,
      0.9479850669701113
    ),
  },
  complete: function () {
    setTimeout(function () {
      viewer.camera.flyTo({
        destination: new Cesium.Cartesian3(
          -2304817.2435183465,
          -3639113.128132953,
          4688495.013644141
        ),
        orientation: {
          direction: new Cesium.Cartesian3(
            0.3760550186878076,
            0.9007147395506565,
            0.21747547189489164
          ),
          up: new Cesium.Cartesian3(
            -0.20364591529594356,
            -0.14862471084230877,
            0.9676978022659334
          ),
        },
        easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
        duration: 6, //地点跳跃的时间
      });
    }, 1000);
  },
}); */


//日本富士山，这个属于区域缩放，缩放的中心点在主视图中间，相机不能移出这个地方
/* const center = Cesium.Cartesian3.fromRadians(
  2.4213211833389243,
  0.6171926869414084,
  3626.0426275055174
);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.scene.camera.lookAtTransform(
  transform,
  new Cesium.HeadingPitchRange(0, -Math.PI / 4, 2900)
); */


/* 
// 绕行锁定的中间点（这个是绕行富士山）
const center = Cesium.Cartesian3.fromRadians(
  2.4213211833389243,
  0.6171926869414084,
  3626.0426275055174
);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.scene.camera.lookAtTransform(
  transform,
  new Cesium.HeadingPitchRange(0, -Math.PI / 8, 2900)
);

// 绕这个点运行
viewer.clock.onTick.addEventListener(function (clock) {
  viewer.scene.camera.rotateRight(0.005);
});
 */
  
    // 添加 Cesium OSM Buildings 图层，就是地上房子的模型和汽车模型
     const buildingTileset = await Cesium.createOsmBuildingsAsync()
    viewer.scene.primitives.add(buildingTileset) 

  })
  </script>
  
  <style>
  @import url("https://cesium.com/downloads/cesiumjs/releases/1.122/Build/Cesium/Widgets/widgets.css");
  
  #cesiumContainer {
    width: 100vw;
    height: 100vh;
    position: absolute;  /* 绝对定位 */
    top: 0;
    left: 0;
  }
  </style>
  